<template>
  <z-tree
    :loadData="loadData"
    v-model:treeData="treeData"
  />
</template>

<script>
import { defineComponent, ref } from 'vue'
export default defineComponent({
  name: 'TreeDemo8',
  setup() {
    const treeData = ref([
      {
        title: 'Expand to load',
        key: '0'
      }, 
      {
        title: 'Expand to load',
        key: '1'
      }, 
      {
        title: 'Tree Node',
        key: '2',
        isLeaf: true
      }
    ])
    const loadData = treeNode => {
      return new Promise(resolve => {
        if (treeNode.dataRef?.children?.length > 0) {
          resolve(treeNode.dataRef.children)
          return
        }
        // 此处写异步调用，直接将获取到的接口数组resolve出去
        resolve([
          {
            title: 'Child Node',
            key: `${treeNode.eventKey}-0`
          }, 
          {
            title: 'Child Node',
            key: `${treeNode.eventKey}-1`
          }
        ])
      })
    }
    return {
      treeData,
      loadData
    }
  }
})
</script>
